{% extends 'dashboard/base.html' %}

{% block title %}仪表盘 - 巧巧点餐管理后台{% endblock %}

{% block content %}
<!-- 页面标题 -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">仪表盘概览</h1>
    <div>
        <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" onclick="window.print()">
            <i class="fas fa-download fa-sm text-white-50"></i> 生成报表
        </a>
    </div>
</div>

<!-- 内容容器 -->
<div class="container-fluid px-0">
    <!-- 内容行 - 统计卡片 -->
    <div class="row mx-lg-n2">
        <!-- 今日订单量 -->
        <div class="col-xl-3 col-md-6 mb-4 px-lg-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">今日订单量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ today_orders }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 本月销售额 -->
        <div class="col-xl-3 col-md-6 mb-4 px-lg-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">本月销售额</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ month_sales }} 亲亲</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 菜品总数 -->
        <div class="col-xl-3 col-md-6 mb-4 px-lg-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">菜品总数</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ food_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-utensils fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户总数 -->
        <div class="col-xl-3 col-md-6 mb-4 px-lg-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">用户总数</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ user_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 内容行 - 图表 -->
    <div class="row mx-lg-n2">
        <!-- 销售趋势图 -->
        <div class="col-xl-8 col-lg-7 px-lg-3">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">月度销售趋势</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">查看选项:</div>
                            <a class="dropdown-item" href="#">按日</a>
                            <a class="dropdown-item" href="#">按周</a>
                            <a class="dropdown-item" href="#">按月</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">导出数据</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单状态分布 -->
        <div class="col-xl-4 col-lg-5 px-lg-3">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">订单状态分布</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">查看选项:</div>
                            <a class="dropdown-item" href="#">今日</a>
                            <a class="dropdown-item" href="#">本周</a>
                            <a class="dropdown-item" href="#">本月</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="orderStatusChart"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        <span class="mr-2">
                            <i class="fas fa-circle text-warning"></i> 待处理
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-info"></i> 处理中
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-success"></i> 已完成
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-danger"></i> 已取消
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 内容行 - 最近订单和热门菜品 -->
    <div class="row mx-lg-n2">
        <!-- 最近订单 -->
        <div class="col-xl-8 col-lg-7 px-lg-3">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">最近订单</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>桌号</th>
                                    <th>时间</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in recent_orders %}
                                <tr>
                                    <td><a href="{% url 'dashboard:order_detail' order_id=order.id %}">{{ order.order_number }}</a></td>
                                    <td>{{ order.table_number }}</td>
                                    <td>{{ order.created_at|date:"m-d H:i" }}</td>
                                    <td>{{ order.total_price }} 亲亲</td>
                                    <td>
                                        {% if order.status == 2 %}
                                        <span class="badge badge-warning">待处理</span>
                                        {% elif order.status == 3 %}
                                        <span class="badge badge-info">处理中</span>
                                        {% elif order.status == 4 %}
                                        <span class="badge badge-success">已完成</span>
                                        {% elif order.status == 5 %}
                                        <span class="badge badge-danger">已取消</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center">暂无订单数据</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-right">
                        <a href="{% url 'dashboard:order_list' %}" class="btn btn-sm btn-primary">
                            查看所有订单 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门菜品 -->
        <div class="col-xl-4 col-lg-5 px-lg-3">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">热门菜品</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        {% for food in popular_foods %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <span class="badge badge-primary badge-pill mr-2">{{ forloop.counter }}</span>
                                {% if food.image %}
                                <img src="{{ food.get_image }}" alt="{{ food.name }}" class="img-thumbnail mr-2" style="width: 40px; height: 40px; object-fit: cover;">
                                {% else %}
                                <div class="bg-light mr-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-utensils text-gray-500"></i>
                                </div>
                                {% endif %}
                                <span>{{ food.name }}</span>
                            </div>
                            <span class="badge badge-success badge-pill">{{ food.order_count }}次</span>
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center">暂无数据</li>
                        {% endfor %}
                    </ul>
                    <div class="mt-3 text-right">
                        <a href="{% url 'dashboard:food_list' %}" class="btn btn-sm btn-primary">
                            查看所有菜品 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script>
    $(document).ready(function() {
        // 销售趋势图
        const salesCtx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: {{ sales_labels|safe }},
                datasets: [{
                    label: '销售额',
                    lineTension: 0.3,
                    backgroundColor: "rgba(78, 115, 223, 0.05)",
                    borderColor: "rgba(78, 115, 223, 1)",
                    pointRadius: 3,
                    pointBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointBorderColor: "rgba(78, 115, 223, 1)",
                    pointHoverRadius: 3,
                    pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    data: {{ sales_data|safe }}
                }]
            },
            options: {
                maintainAspectRatio: false,
                layout: {
                    padding: {
                        left: 10,
                        right: 25,
                        top: 25,
                        bottom: 0
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            maxTicksLimit: 7
                        }
                    },
                    y: {
                        ticks: {
                            maxTicksLimit: 5,
                            padding: 10,
                            callback: function(value) {
                                return value + ' 亲亲';
                            }
                        },
                        grid: {
                            color: "rgb(234, 236, 244)",
                            drawBorder: false,
                            borderDash: [2]
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: "rgb(255,255,255)",
                        titleColor: '#6e707e',
                        titleFont: {
                            size: 14
                        },
                        bodyColor: "#858796",
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        padding: 15,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return '销售额: ' + context.raw + ' 亲亲';
                            }
                        }
                    }
                }
            }
        });

        // 订单状态分布图
        const orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
        const orderStatusChart = new Chart(orderStatusCtx, {
            type: 'doughnut',
            data: {
                labels: ["待处理", "处理中", "已完成", "已取消"],
                datasets: [{
                    data: {{ order_status_data|safe }},
                    backgroundColor: ['#f6c23e', '#36b9cc', '#1cc88a', '#e74a3b'],
                    hoverBackgroundColor: ['#e6b535', '#2babc0', '#17a673', '#d43e31'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)"
                }]
            },
            options: {
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyColor: "#858796",
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        padding: 15,
                        displayColors: false
                    }
                }
            }
        });
    });
</script>
{% endblock %} 